<template>
  <div class="vip">
    <div class="page_top">
      <div class="top_info">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="info_title">会员管理</div>
      </div>
      <div class="add" @click="$router.push('/vipAdd')">
        <span class="htd_add">+</span>
        <span>添加会员</span>
      </div>
    </div>
    <div class="page_con">
      <el-table :data="vipList" border max-height="700" style="width: 100%">
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="phone" label="电话" align="center"></el-table-column>
        <el-table-column prop="wechatId" label="微信号" align="center"></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="160">
          <template slot-scope="scope">
            <el-button @click="lookClick(scope.row)" type="text" size="small">查看</el-button>
            <el-popconfirm
              popper-class="del_pop"
              title="这是一段内容确定删除吗？"
              @onConfirm="delClick(scope.row)"
            >
              <el-button class="del_btn"  slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="page_tion">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="pageSizes"
          :page-size="size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="查看会员"
      :visible.sync="showView"
      width="30%"
      class="dialog_vip"
      >
      <p>id：{{showData.id}}</p>
      <p>姓名：{{showData.name}}</p>
      <p>电话：{{showData.phone}}</p>
      <p>微信号：{{showData.wechatId}}</p>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="showView = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>  
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
export default {
  name: "vip",
  data(){
    return {
      //如果https://easy-mock.com/ 这个网站访问不通vipListJia和vipList换个名字(用假数据，不用调接口测试得数据)
      vipList:[],
      vipListJia:[
        {
          name: '梁刚',
          phone: '15771985461',
          wechatId: 'prlee',
          id:'D61badC2-c6c5-F5fa-cd4e-DbCd8DAdAD7E'
        },
        {
          name: '徐娜',
          phone: '18559558106',
          wechatId: 'rxlcq',
          id:'d4BcFe4f-ad95-Dc72-71DA-9c94c45c9d8C'
        },
        {
          name: '薛强',
          phone: '18823617386',
          wechatId: 'kueoc',
          id:'7Fa5Afa8-EeBe-b77D-Cf89-51C43147EcD5'
        },
        {
          name: '赖明',
          phone: '18858721658',
          wechatId: 'quugg',
          id:'2DA0c6eB-E6D6-BaE3-baaB-ecc03f228AEe'
        },
        {
          name: '康超',
          phone: '18466183305',
          wechatId: 'ahwea',
          id:'2de4a4bd-16EF-EdD9-9cA4-cDaA1b1C869b'
        },
        {
          name: '周霞',
          phone: '18714534858',
          wechatId: 'ngusb',
          id:'2fDCcf55-6dE0-3786-6B01-Ef979fDef5c2'
        },
        {
          name: '程娜',
          phone: '15431417555',
          wechatId: 'nblcw',
          id:'4171deC4-65A4-3fBc-cD1b-84C6bACa7BA5'
        },
        {
          name: '廖磊',
          phone: '18623951528',
          wechatId: 'znzlf',
          id:'D4FFFC9b-E90e-Cc7d-b937-CEC4E6060fB9'
        },
        {
          name: '傅静',
          phone: '18511822527',
          wechatId: 'uppcq',
          id:'77fEdbF7-7F8e-ADC8-bdD7-eC4Cd9f21beb'
        },
        {
          name: '宋刚',
          phone: '18813723412',
          wechatId: 'gwxwb',
          id:'B29DddEd-3d3c-48bc-1484-7B6fB94bADF3'
        }
      ],
      page:1,
      size:10,
      total:100,
      pageSizes:[10,20,30,40,50],
      showData:{},
      showView:false, //弹出框
    }
  },
  created(){
    //如果https://easy-mock.com/ 这个网站访问不通，测试接口就有问题，就注释下面这一行，不掉接口，使用假数据
    this.getData();
  },
  computed:{  
    ...mapGetters({
      userInfo:"getUserInfo",
    }),
    
  },
  methods:{
    ...mapMutations({
    }),
    ...mapActions({
      getNumber:'loginModule/getNumber',
      getUser:'loginModule/getUser'
    }),
    async getData(){
      let res=await this.getUser();
      if(res){
        this.vipList=res.data;
        this.size=res.size;
        this.total=res.total
      }
      // console.log(this.vipList,'vipL');
    },
    //每页数量切换  调数据
    handleSizeChange(val){
      this.size=val;
    },
    //当前页切换  调数据
    handleCurrentChange(val){
      this.page=val;
    },
    lookClick(item){
      this.showData=item;
      this.showView=true;
    },
    delClick(item){
      this.vipList=this.vipList.filter(e => e.id!=item.id);
      this.total-=1
    },
  },
}
</script>
<style lang="scss" scoped>
.dialog_vip{
  p{
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
  }
}
.el-popconfirm__main{
  
}
::v-deep .del_btn{
    background: transparent;
    border: none;
    padding: 9px 0;
    span{
      color: #3a8ee6;
      font-size: 12px;
      margin-left: 5px;
    }
  }
</style>